<template>
	<view class="practice-box">
		<!-- 听力 阅读 口语切换 -->
		<div class="practice-top">
			<div class="tab-text" :class="{textFs:item.value==valueTab}" v-for="(item,index) in tabList" :key="index" @click="tabEvent(item)">
				{{item.name}}
				<span :style="{display:item.value==valueTab?'block':'none'}"></span>
			</div>
		</div>
		<!-- 口语类 下方 Part 切换 -->
		<div class="tab-Part" v-if="valueTab==3">
			<span :class="{'tabPartCss':tabPartValue==item.value}" v-for="(item,index) in tabPart" :key="index" @click="tabPartEvent(item)">{{item.name}}</span>
		</div>
		<!-- 列表 -->
		<div class="scroll-box">
			<scroll-view :scroll-top="scrollTop"  scroll-y="true" class="scroll-y" @scrolltoupper="backToTop" @scrolltolower="loadMoreData">
				<div  class="scroll-bgColor" :style="{paddingTop:valueTab==3&&'0'}" v-if="listData.length>0">
					<div class="scroll-list" v-for="(item, index) in listData" :key="index" @click="goDetailEvent(item)">
						<!-- 听力  阅读的列表 -->
						<template v-if="'1,2'.includes(valueTab)">
							<div class="list-time">
								<span>{{item.examExName || ''}}</span>
								<!-- <span class="timeState">{{item.submitTime||''}} 提交</span> -->
							</div>
							<div class="list-name">
								<!-- {{item.seriesType||''}} -->
								<span class="timeState">{{item.submitTime||''}} 提交</span>
							</div>
						</template>
						<!-- 口语列表 -->
						<template v-if="valueTab==3">
							<div class="list-time">
								<span>{{item.topicType||''}}</span>
								<span class="timeState">{{item.createTime||''}} 提交</span>
							</div>
							<div class="list-month">
								Question {{item.topicOrder }} | {{item.time}}题库
							</div>
							<div class="list-text" v-html="topicNameFun(item.topicName)||''">
								 <!-- {{item.topicName||'' }} -->
							</div>
						</template>
					</div>
				</div>
				<div v-if="noMore" class="noMoreStyle">
						-已经到底了-
				</div>
				<div class="emptyData" v-if="total==0&&listData.length==0">
					<view><img src="https://jxfwpt-p.oss-cn-beijing.aliyuncs.com/words/credit/img_emptyx.png" alt=""></view>
					<text>暂无提交记录</text>
				</div>
			</scroll-view>
		</div>
	</view>
</template>

<script>
	import { apiGetIeltsRallList } from '@/api/user/user.js'
	export default {
		data() {
			return {
				tabList:[{name:'听力',value:'1'},{name:'阅读',value:'2'},{name:'口语',value:'3'},{name:'写作',value:'4'}],
				tabPart:[{name:'Part 1',value:'1'},{name:'Part 2 & 3',value:'2'}],
				valueTab:1,
				scrollTop:0,
				tabPartValue:1,
				pageSize:10,
				pageNum:1,
				listData:[],
				total:null,
				noMore:false
			}
		},
		created() {
			this.getIeltsRallList()
		},
		onShow() {
			if(this.valueTab==3){
				this.listData=[]
				this.getIeltsRallList()
			}
		},
		methods: {
			// 听力 阅读列表接口 http://10.152.164.98:5173/record?id=124
			getIeltsRallList(){
				this.$tip.loading()
				apiGetIeltsRallList({
					subjectType:this.valueTab,
					pageSize:this.pageSize,
					pageNum:this.pageNum,
					partType:this.tabPartValue
				}).then(res=>{
					this.$tip.loaded()
					console.log('列表接口res',res)
					if(res.code==200){
						this.listData=[...this.listData,...res.data.rows]
						this.total=res.data.total
					}else{
						this.$tip.confirm(res.msg, false)
					}
				}).catch((error)=>{
					this.$tip.loaded()
					this.$tip.confirm(error.msg, false)
				})
			},
			topicNameFun(item){
				// console.log('item文案',item.split('<br/>'))
				let arrText=item.split('<br/>')
				if(arrText.length>=3){
					let sliceArr= arrText.slice(0, 3)
					return sliceArr.join('<br/>')+'...'
				}else{
					return item
				}
				
			},
			goDetailEvent(item){
				
				console.log('item详情',item)
				// return

				if(this.valueTab==3){
					uni.navigateTo({
					    url: '/pages/exam/spokenExam?timeStr=' + item.time + '&topicType=' +item.topicType+ '&topicSeries=' +item.topicSeries+ '&partType=' + this.tabPartValue+'&page=practice'+'&index='+(item.topicOrder-1)
					})
				}else{
					uni.navigateTo({
					    url: '/pages/user/topicDetail?id='+item.recordId
					})
				}
			},
			// 顶部类型切换
			tabEvent(item){
				this.noMore=false
				if(this.scrollTop>0){
					this.scrollTop=0
				}
				this.valueTab=item.value
				this.tabPartValue=1
				this.pageNum=1
				this.listData=[]
				this.getIeltsRallList()
			},
			// 口语的Part切换
			tabPartEvent(item){
				if(this.scrollTop>0){
					this.scrollTop=0
				}
				this.tabPartValue=item.value
				this.noMore=false
				this.pageNum=1
				this.listData=[]
				this.getIeltsRallList()
			},
			backToTop() {
				
					this.scrollTop=0
				
			  //     uni.pageScrollTo({
					// // selector:'.scroll-y',
			  //       scrollTop: 0,
			  //       duration: 300
			  //     })
			},
			// 进入详情
			scroll(e){
				this.scrollTop=e.detail.scrollTop
				// uni.navigateTo({
				// 	url: "pages/words/address?orderNumber="+item.orderNumber
				// })
			},
			loadMoreData(){
				console.log('loadMoreData:')
				if(this.total - (this.pageNum * 10) > 0){
					this.pageNum += 1;
					// if(this.taskType==0){
					// 	this.getHomeworkList();
					// }else if(this.taskType==1){
					// 	this.getDayClassSchedule()
					// }
					this.getIeltsRallList()
					
				}else if(this.total>0){
					console.log('没有更多了')
					this.noMore = true;
				}
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	@function torem($rpx){  //$rpx为需要转换的字号
	    @return #{$rpx * 100 / 750 / 4}rem; 
	}
.practice-box{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #F6F8FC;
	.practice-top{
		height: torem(90);
		display: flex;
		background-color: #ffffff;
		font-size: torem(28);
		align-items: center;
		padding: 0 torem(32);
		.textFs{
			font-size: torem(32);
			color: #333333 !important;
			font-weight: bold;
		}
		.tab-text{
			margin-right: torem(70);
			position: relative;
			color: #666666;
			span{
				position: absolute;
				background-color: #5155F7;
				width: 18px;
				left:50% ;
				margin-left: -9px;
				bottom: -5px;
				height: 2px;
				display: none;
				
			}
		}
	}
	.tab-Part{
		display: flex;
		padding: torem(20) torem(30);
		span{
			display: flex;
			margin-right: torem(30);
			background: #ffffff;
			color: #333333;
			border-radius: torem(50);
			font-size: torem(24);
			padding:torem(10) torem(18);
		}
		.tabPartCss{
			background: #FD453D;
			color: #ffffff;
		}
	}
}
.scroll-box{
	flex: 1;
	position: relative;
	background-color: #F6F8FC;
	.scroll-y{
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		.noMoreStyle{
			font-size: torem(24);
			color:#ccc;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom:torem(28)  ;
			margin-top: torem(-24);
			// position: absolute;
			width: 100%;
		}
		
	}

	.scroll-bgColor{
		background-color: #F6F8FC;
		padding: torem(20) torem(30);
		.scroll-list{
			background-color: #ffffff;
			margin-bottom: torem(20) ;
			padding:torem(27) torem(19);
			// box-sizing: border-box;
		}
		.list-time{
			font-size:torem(28) ;
			display: flex;
			justify-content: space-between;
			font-weight: bold;
			.timeState{
				font-size:torem(24);
				font-weight: normal;
				color: #999999;
			}
		}
		.list-name{
			color: #333333;
			padding-top: torem(10);
			font-size: torem(24);
			.timeState{
				font-size:torem(24);
				font-weight: normal;
				color: #999999;
			}
		}
		.list-month{
			font-size:torem(24);
			font-weight: normal;
			padding: torem(10) 0;
			color: #999999;
		}
		.list-text{
			color: #333333;

			font-size: torem(28)
		}
	}
	.emptyData{
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		img{
			width:torem(280) ;
			height: torem(142) ;
		}
		text{
			font-size: torem(28);
			font-family: PingFang SC;
			color: #999999;
			
		}
	}
}
</style>
